<template>
	<view>
		<u-popup :show="show" :mode="mode" @close="close" @open="open" :closeable="true" :z-index="99999" :customStyle="customStyle">
			<view class="popup-content">
				<view class="header">
					<view class="title">{{title}}</view>
				</view>
				<view class="content">
					<!--导航-->
					<view class="navs">
						<view class="nav-item" v-for="(nav,index) of navs" :key="index" :class="[{'nav-item-active':level===index}]" @tap="changeNav(index,nav)">
							{{nav.label}}
						</view>
					</view>
					<!--数据-->
					<view class="datas">
						<scroll-view :scroll-y="true">
							<view v-for="(parent,index) of source" :key="index">
								<view v-show="index===level">
									<view v-if="parent.length>0">
										<view class="data-item" v-for="(item,itemIndex) of parent" :key="itemIndex">
											<view :class="[{'text-main-color':item[privateKeys.checkKey]}]" @tap="checkItem(item)">{{item[labelKey]}}</view>
											<view v-if="level>0">
												<!--选择大类小类-->
												<view v-if="workType==='classify'" class="check-btn" @tap="choose(item,index)">选择</view>
												<!--选择处理人-->
												<view class="flex align-center" v-else>
													<view v-if="item._taskType===HandleMap.dept" class="check-btn" @tap="checkItem(item,HandleMap.user)">人员</view>
													<view v-else class="check-btn" @tap="choose(item,index)">选择</view>
													<view v-if="item.children && item.children.length>0" class="check-btn margin-left-xs" @tap="checkItem(item)">子组织</view>
												</view>
											</view>
										</view>
									</view>
									<view v-else>
										<wakin-data-empty message="暂无数据"></wakin-data-empty>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<!-- <view class="foot">
					<view class="text-blue text-center">加载更多</view>
				</view> -->
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		defaultNavs,
		privateKeys,
		LoadEnum
	} from "./config"
	import {
		HandleMap
	} from "@/enums/report"
	export default {
		name: "WakinCascader",
		props: {
			workType: {
				type: String,
				default: "classify", // classify:选择大类小类 handler:选择处理人
			},
			loadType: {
				type: String,
				default: LoadEnum.async
			},
			// 树结构数据源(LoadEnum.tree时)
			treeDatas: {
				type: Array,
				default: () => []
			},
			title: {
				type: String,
				default: ""
			},
			show: {
				type: Boolean,
				default: false
			},
			// 自定义label key
			labelKey: {
				type: String,
				default: "label"
			},
			// 自定义value key
			valueKey: {
				type: String,
				default: "value"
			},
			// 自定义children key (LoadEnum.tree时)
			childrenKey: {
				type: String,
				default: "children"
			},
			mode: {
				type: String,
				default: "bottom"
			},
			customStyle: {
				type: Object,
				default: () => {
					return {
						borderRadius: "20rpx 20rpx 0 0"
					}
				}
			},
		},
		data() {
			return {
				navs: JSON.parse(JSON.stringify(defaultNavs)),
				level: 0,
				source: [],
				privateKeys,
				mainColor: this.$MainColor,
				backupItem: null,
				currentItem: null,
				defaultFlowId: null,
				HandleMap
			}
		},
		mounted() {
			if (this.loadType === LoadEnum.tree) {
				// const obj = this.treeDatas[this.level]
				// this.push([obj])
				this.push(this.treeDatas)
			}
		},
		methods: {
			checkItem(e, handler) {
				this.backupItem = e;

				// this.setCheckItem(e);
				// this.currentItem = e;
				this.$emit("check", {
					level: this.level,
					e: handler ? Object.assign({}, e, {
						_taskType: null
					}) : e,
					navs: this.navs
				})
				// tree结构加载数据
				if (this.loadType === LoadEnum.tree) {
					const children = e[this.childrenKey];
					this.push(children || [])
				}
			},
			setCheckItem(e) {
				this.source[this.level].map(m => m[privateKeys.checkKey] = false);
				e[privateKeys.checkKey] = true;
				this.navs[this.level].label = e[this.labelKey] // e.label
				this.navs[this.level].value = e[this.valueKey] // e.value
				this.navs[this.level].flow = e.flowName
				this.navs[this.level].taskId = e.currentTaskId
				this.navs[this.level].taskType = e._taskType
			},
			push(array, fn) {
				console.log("mfCheckHandler", array);
				const can = !fn || (fn && fn(this.level, array, this.navs))
				if (!can) return;
				if (this.backupItem) {
					this.currentItem = this.backupItem; // JSON.parse(JSON.stringify(this.backupItem));
					this.setCheckItem(this.currentItem);
				}
				const list = uni.$u.deepClone(array)
				list.forEach(item => {
					this.$set(item, privateKeys.checkKey, false)
					this.$set(item, privateKeys.levelKey, this.level)
				})
				let level = this.level;
				level = level < 0 ? 0 : level
				const changeList = this.source.filter((m, i) => i <= level);
				this.source = changeList;
				list.length > 0 && (this.source = [
					...changeList,
					list
				])
				this.navs = [...this.navs.filter((m, i) => i <= level)]
				if (array && array.length > 0 && this.source.length > 1) {
					this.navs = [...this.navs.filter((m, i) => i <= level), JSON.parse(JSON.stringify(defaultNavs))[0]]
					this.level++;
				}
				if (!array || array.length === 0) {
					// this.$toast("没有数据")
					// return;
					this.choose(this.currentItem);
				}
				// console.log("this.source: ", JSON.parse(JSON.stringify(this.source)), this.level, JSON.parse(JSON.stringify(this.navs)));
			},
			changeNav(index, e) {
				this.level = index;
				// console.log("this.navs: ", this.level, JSON.parse(JSON.stringify(this.navs)));
			},
			open() {

			},
			close() {
				this.$emit("update:show", false)
			},
			choose(e, index) {
				// console.log("级联choose", e, index);
				this.setCheckItem(e);
				const level = this.source.length;
				if (index !== null && index !== undefined && index < level) {
					this.source = this.source.filter((f, i) => i <= index);
					this.navs = this.navs.filter((f, i) => i <= index);
				}
				this.$emit("choose", {
					chooseItem: uni.$u.deepClone(e),
					choosePath: uni.$u.deepClone(this.navs),
					// path: this.navs.map(m => m.label).join("/"),
					path: this.navs[this.navs.length - 1].label,
					level: this.level
				})
				this.close()
			},
			reset() {
				this.level = 0;
				this.source = [];
				this.navs = JSON.parse(JSON.stringify(defaultNavs));
				this.backupItem = null;
				this.currentItem = null;
			},
			/**
			 * @description 业务代码 选择组织
			 * 当组件用于选择"下一节点处理人"时,
			 * 1.可以选择当前节点的人员(正常流程)
			 * 2.也可以选择当前部门的子部门(递归层级)
			 */
			loadDept(item, index) {
				console.log("loadDept", item, index);
				if (item.children && item.children.length > 0) this.$emit("checkDept", item.children)
			}
		},
	}
</script>

<style lang="less" scoped>
	.popup-content {
		height: 70vh;
		padding: 50rpx 0rpx 30rpx 0rpx;
		position: relative;
		background-color: #ffffff;
		border-radius: 15rpx 15rpx 0 0;

		.header {
			.title {
				text-align: center;
				font-weight: bold;
				font-size: 36rpx;
			}
		}

		.content {
			padding: 30rpx;
			z-index: 999999;

			.navs {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				font-size: 30rpx;

				.nav-item {
					margin-bottom: 20rpx
				}

				.nav-item-active {
					font-weight: bold;
					position: relative;
				}

				.nav-item:not(:last-child) {
					margin-right: 20rpx;
				}

				.nav-item-active::before {
					content: " ";
					width: 60%;
					height: 8rpx;
					position: absolute;
					left: 0;
					right: 0;
					margin: auto;
					bottom: -10rpx;
					background-color: var(--main-color);
					border-radius: 100rpx;
				}
			}

			.datas {
				margin-top: 20rpx;
				height: 65vh;

				scroll-view {
					height: 90%;
					padding-bottom: 100rpx;
				}

				.data-item {
					padding: 20rpx 0;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.check-btn {
						width: max-content;
						background-color: var(--main-color);
						color: #ffffff;
						border-radius: 20rpx;
						padding: 5rpx 16rpx;
						font-size: 24rpx;
					}
				}

				.data-item:not(:last-child) {
					border-bottom: 1px solid #f8f8f8;
				}
			}
		}

		.foot {
			width: 100%;
			height: 50rpx;
			position: fixed;
			bottom: 0;
		}
	}
</style>